<!-- 展示二维码 -->
<template>
  <u-popup :show="isShowCode" mode="center" :round="10">
    <view class="popup_view">
      <view class="top">
        <text>二维码入园</text>
        <uni-icons
          type="close"
          size="20"
          class="close_icon"
          @click="closeCode(false)"
        ></uni-icons>
      </view>
      <view class="center">
        <view class="time"> {{ time }} </view>
        <view class="orderCode">
          <text style="color: #666666">验证码：</text>
          <text>{{ orderInfo.orderCode }}</text>
        </view>
        <view class="orderCode">
          <image
            style="width: 500rpx; height: 500rpx"
            :src="orderInfo.orderPictureCode"
          />
        </view>
        <text class="tips">进入景区闸机时请出示</text>
      </view>
      <view class="bottom" @click="closeCode(true)">
        <text>确定</text>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    isShowCode: {
      type: Boolean,
    },
    orderInfo: {
      type: Object,
    },
  },
  watch: {
    isShowCode(newVal, oldVal) {
      if (newVal) {
        this.timer = setInterval(() => {
          this.getTime();
        }, 1000);
      }
    },
  },
  data() {
    return {
      time: "",
      timer: null,
    };
  },

  mounted() {},

  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

  methods: {
    closeCode(isIn) {
      this.$emit("close-code", isIn);
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 获取年月日时分秒
    getTime() {
      // 创建一个Date对象
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");

      this.time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style lang="scss">
.popup_view {
  width: 686rpx;
  background: #ffffff;
  border-radius: 16rpx;

  text-align: center;
  display: flex;
  flex-direction: column;

  color: #0e9589;
  .top {
    position: relative;
    text-align: center;
    height: 104rpx;
    line-height: 104rpx;
    border-bottom: 2rpx solid #eaeaea;
    font-size: 32rpx;
    color: #333333;
    .close_icon {
      position: absolute;
      right: 32rpx;
    }
  }

  .center {
    font-size: 48rpx;
    padding-bottom: 34rpx;
    .time {
      color: #666666;
      margin: 38rpx 0;
    }
    .orderCode {
      margin-top: 58rpx;
    }
    .tips {
      font-size: 28rpx;
      color: #666666;
    }
  }

  .bottom {
    border-top: 2rpx solid #eaeaea;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 32rpx;
  }
}
</style>
